<template>
	<view>
		<u-popup :show="isShow" mode="bottom" :round="'20rpx'" @close="hide">
			<view class="top-nav">
				<view class="cancel" @tap="hide">取消</view>
				<view class="tips">选择时间</view>
				<view class="ok" @tap="ok">完成</view>
			</view>
			<view class="pick-title">
				<view class="date-title" :class="{'select-class': check=='start'}" @tap="clickChange('start')">{{selectDate[0].time || '开始时间'}}</view>
				<view class="guide">至</view>
				<view class="date-title" :class="{'select-class': check=='end'}" @tap="clickChange('end')">{{selectDate[1].time || '结束时间'}}</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</u-popup>

	</view>
</template>

<script>
	// 根据年月获取每月有多少天 
	function mGetDate(year, month) {
		let days = []
		const laod = new Date(year, month, 0).getDate()
		for (let i = 1; i <= laod; i++) {
			days.push(i)
		}
		return days
	}
	// 设置开始时间
	const STARTYEAR = 1950
	// 结束时间是多少年后
	const LATERS = 20
	export default {

		data() {
			const TODAYDATE = new Date()
			const years = []
			const year = TODAYDATE.getFullYear()
			const months = []
			const month = TODAYDATE.getMonth() + 1
			let days = []
			const day = TODAYDATE.getDate()

			for (let i = STARTYEAR; i <= year + LATERS; i++) {
				years.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			days = mGetDate(year, month)
			return {
				years,
				months,
				days,
				value: [year - STARTYEAR, month - 1, day - 1],
				// 选中的样式
				indicatorStyle: `height: 80rpx;`,
				check: 'start',
				selectDate: [{
					time: `${year}-${month}-${day}`,
					date: new Date(year, month, day),
					year,
					month,
					day
				}, {}],
				isShow: false
			}
		},
		methods: {
			show() {
				this.isShow = true
			},
			hide() {
				this.isShow = false
			},
			bindChange(e) {
				const val = e.detail.value
				this.days = mGetDate(this.years[val[0]], this.months[val[1]])
				if (this.check == 'start') {
					this.selectDate[0] = {
						time: `${this.years[val[0]]}-${this.months[val[1]]}-${this.days[val[2]]}`,
						date: new Date(this.years[val[0]], this.months[val[1]], this.days[val[2]]),
						year: this.years[val[0]],
						month: this.months[val[1]],
						day: this.days[val[2]]
					}
					// 如果选择的开始时间大于结束时间，则让结束时间等于开始时间
					if (this.selectDate[1].date && this.selectDate[0].date > this.selectDate[1].date) {
						this.selectDate[1] = this.selectDate[0]
					}
				} else {
					this.selectDate[1] = {
						time: `${this.years[val[0]]}-${this.months[val[1]]}-${this.days[val[2]]}`,
						date: new Date(this.years[val[0]], this.months[val[1]], this.days[val[2]]),
						year: this.years[val[0]],
						month: this.months[val[1]],
						day: this.days[val[2]]
					}
					// 如果选择的结束时间小于开始时间，则让开始时间等结束时间
					if (this.selectDate[0].date && this.selectDate[1].date < this.selectDate[0].date) {
						this.selectDate[0] = this.selectDate[1]
					}
				}
			},
			clickChange(e) {
				this.check = e
				let temp = []
				// 让pick转到选中的状态
				if (e == 'start' && this.selectDate[0].date) {
					temp = this.selectDate[0].time.split('-')
					this.value = [temp[0] - STARTYEAR, temp[1] - 1, temp[2] - 1]
				} else if (e == 'end' && this.selectDate[1].date) {
					temp = this.selectDate[1].time.split('-')
					this.value = [temp[0] - STARTYEAR, temp[1] - 1, temp[2] - 1]
				}

			},
			ok() {
				this.$emit('ok', this.selectDate)
			}
		}
	}
</script>

<style lang="scss">
	picker-view {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 80rpx;
		text-align: center;
	}

	.top-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		font-size: 32rpx;

		.cancel {
			color: #666666;

		}

		.tips {
			color: #111111;
			font-size: 36rpx;
		}

		.ok {
			color: #F18C1E;
		}
	}

	.pick-title {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		.date-title {
			width: 240rpx;
			text-align: center;
			color: #999999;
			border-bottom: 1px solid transparent;
			height: 60rpx;
			line-height: 60rpx;
		}

		.guide {
			width: 200rpx;
			text-align: center;
		}

		.select-class {
			color: #F18C1E;
			border-bottom: 1px solid #F18C1E;
		}
	}
</style>
